<script setup lang='ts'>
import {onMounted, reactive, ref} from 'vue';
import { numberApi } from '@/api/controller';
import { ToastWarning, Toastloading, ToastSuccess } from '@/utils/public';
import { getDateArray, getPlayEndTime, getHMMSS } from '@/utils'
import Pagination from "@/components/Pagination/index.vue";
import serachUserid from '@/components/serachUserid/index.vue';
import Ipdenylist from "@/views/user/userList/ipdenylist.vue";

const ipDenyList=ref(null);
const denyList = ()=>{
  ipDenyList.value.openDialog()
}

const action = reactive({
  total: 0,
  list: [] as any[],
  dateArr: getDateArray('time') as Array<number>
})
const listQuery = reactive({
  page: 1,
  limit: 20,
  uuid: '',
  user_id:'',
})
const handleSerach = () => {
  listQuery.page = 1
  getList()
}
const getList = async () => {
  if (!listQuery.uuid) return ToastWarning('请输入用户UUID')
  const loading = Toastloading()
  const timeObi = getPlayEndTime(action.dateArr)
  const res = await numberApi.user_ip_login_log({
    ...listQuery,
    start_time: timeObi.playTime,
    end_time: timeObi.endTime
  })
  loading.close()
  const { data = [], total = 0 } = res.data || {}
  action.total = total
  action.list = data
}
const denyIP = async () => {
  if (!action.list.length) return ToastWarning('请选择IP')
  const user_id = action.list[0].user_id;
  await numberApi.handleForbidIp({user_id:user_id}).then(() => {
    ToastSuccess(`IP封禁成功`)
    getList()
  }).catch(() => {
    ToastWarning(`IP封禁失败`)
  })

}
const allowIP = async () => {
  if (!action.list.length) return ToastWarning('请选择IP')
  const user_id = action.list[0].user_id;
  await numberApi.handleUnForbidIp({user_id:user_id}).then(() => {
    ToastSuccess(`IP解禁成功`)
    getList()
  }).catch(() => {
    ToastWarning(`IP解禁失败`)
  })

}

const deleteIPlog = async (row: any) => {
  const { id } = row;
  const loading = Toastloading();
  try {
    await numberApi.deleteIpLog({ id:id });
    ToastSuccess('IP日志删除成功');
    getList();
  } catch (error) {
    ToastWarning('IP日志删除失败');
  } finally {
    loading.close();
  }
};
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div style="width:250px;margin-right: 2em;" class="uuid">
            <serachUserid v-model:user_id="listQuery.user_id" v-model:uuid="listQuery.uuid"/>
          </div>
        </div>
        <div class="labelItem">
          <div class="label">时间：</div>
          <el-date-picker v-model="action.dateArr" type="datetimerange" format="YYYY-MM-DD HH:mm:ss " value-format="x"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button type="danger" v-rule="'number_forbid_ip'" @click="denyIP">封禁IP</el-button>
          <el-button type="primary" v-rule="'number_unforbid_ip'" @click="allowIP">解封IP</el-button>
          <el-button type="primary"  @click="denyList">封禁IP列表</el-button>
        </div>
      </div>
    </div>
    <el-table class="xm-TableCenter" :data="action.list" border>
      <el-table-column width="140" prop="user_id" label="用户ID" />
      <el-table-column width="140" prop="uuid" label="用户UUID" />
      <el-table-column min-width="200" prop="created_time" label="开始时间">
        <template #default="scoped">
          {{ scoped.row.time > 0 ? getHMMSS(scoped.row.time * 1000) : scoped.row.time }}
        </template>
      </el-table-column>
      <el-table-column min-width="200" prop="ip" label="登陆IP" />
      <el-table-column width="140" prop="forbid_status" label="状态">
        <template #default="scoped">
           <el-tag type="danger" v-if="scoped.row.forbid_status">封禁</el-tag>
           <el-tag type="success" v-else>正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="140" prop="forbid_status" label="操作">
        <template #default="scoped">
          <el-button type="danger" v-rule="'ip_log_delete'" @click="deleteIPlog(scoped.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <ipdenylist ref="ipDenyList" />
  </div>
</template>
<style>
.uuid .el-select {
  width:100%!important;
}
</style>
